<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test 3 | page2 </title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper" id="test2App">


  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">项目管理</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">项目管理</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <div class="content">
      <div class="container-fluid">
        


        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">
                	<!-- Responsive Hover Table -->
                	项目列表
                </h3>

                <div class="card-tools">
                  <div class="input-group input-group-sm" style="width: 150px;">
                    <input type="text" name="table_search" class="form-control float-right" placeholder="Search">

                    <div class="input-group-append">
                      <button type="submit" class="btn btn-default">
                        <i class="fas fa-search"></i>
                      </button>
                    </div>
                    <div class="input-group-append">&nbsp;</div>
                    <div class="input-group-append" alt="添加" >
                      <button @click="addProject" class="btn btn-default">
                        <i alt="添加" class="fas fa-plus"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body table-responsive p-0">
                <table class="table table-hover text-nowrap">
                  <thead>
                    <tr>
                      <th>编号</th>
                      <th>项目名</th>
                      <th>日期</th>
                      <th>状态</th>
                      <th>备注</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item,index) in projectList1" :key="index">
                      <td>{{ item.id}}</td>
                      <td>{{ item.name}}</td>
                      <td>{{ item.date1}}</td>
                      <td>{{ getStatusText(item.status)}}</td>
                      <td>{{ item.remark}}</td>
                      <td>
                          <a href="#" @click="edit1(item.id)">编辑</a> |
                          <a href="#" @click="delete1(item.id)">删除</a>
                      </td>
                    </tr>
                    <!-- 
{"name":"afafe","remark":"zcvxcv","date1":"2025-02-05 17:25:15","status":"1","id":0}                    
                    <tr>
                      <td>183</td>
                      <td>项目 1</td>
                      <td>11-7-2014</td>
                      <td><span class="tag tag-success">使用中</span></td>
                      <td>无，仅测试</td>
                      <td><a href="#">编辑</a>|<a href="#">删除</a></td>
                    </tr>
                    <tr>
                      <td>219</td>
                      <td>项目 2</td>
                      <td>11-7-2014</td>
                      <td><span class="tag tag-warning">使用中</span></td>
                      <td>无，仅测试</td>
                      <td>编辑|删除</td>
                    </tr>
                    <tr>
                      <td>657</td>
                      <td>项目 3</td>
                      <td>11-7-2014</td>
                      <td><span class="tag tag-primary">使用中</span></td>
                      <td>无，仅测试</td>
                      <td>编辑|删除</td>
                    </tr>
                    -->

                  </tbody>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
        </div>
        <!-- /.row -->





        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->


      <!-- modal -->
      <div class="modal fade" id="modal-addProject">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">
              	<!-- Default Modal -->
              	添加项目
              </h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>新建项目&hellip;</p>
              <p>
              	<!-- general form elements -->
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">项目{{ one() }}</h3>
              </div>
              <!-- /.card-header -->
              <!-- form start -->
              <form @submit.prevent="handleSubmit1">
                <div class="card-body">
                  <div class="form-group">
                    <label for="">项目名</label>
                    <input type="text" class="form-control" name="projectName"
                    	:value="projName" id="projectName" placeholder="输入项目名">
                  </div>
                  <div class="form-group">
                    <label for="">日期</label>
                    <input type="text" class="form-control" :value="date1"
                    	name="projectDate" id="projectDate" placeholder="">
                  </div>
                  <div class="form-group">
                    <label for="">备注</label>
                    <input type="text" class="form-control" name="projectRemark"
                    	:value="projRemark" id="projectRemark" placeholder="输入备注">
                  </div>
                </div>
                <!-- /.card-body -->
                 
                <div class="card-footer" style="text-align: center;">
                  <button type="submit" class="btn btn-primary">保存</button>
                </div>
				
              </form>
            </div>
            <!-- /.card -->
              </p>
            </div>
            <!--<div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>-->
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->

</div>
<!-- ./wrapper -->

<!-- REQUIRED SCRIPTS -->

<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="js/adminlte.min.js"></script>
<script src="js/vue.min.js"></script> 
</body>

<script type="text/javascript">


  function formatDateToYYYYMMDDHHMMSS(date) {
      let year = date.getFullYear();
      let month = String(date.getMonth() + 1).padStart(2, '0');
      let day = String(date.getDate()).padStart(2, '0');
      let hours = String(date.getHours()).padStart(2, '0');
      let minutes = String(date.getMinutes()).padStart(2, '0');
      let seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  }

	new Vue({
		el:"#test2App",
		data(){
			return {
				msg: 'abc',
        projectList1: [],
        maxId: 1,
        projName: '',
        projRemark: '',
        flag1: '0',
        curId: '',
				date1: ''
			}
		},
		created(){

      let projectArr1 = localStorage.getItem('projList');
      console.log("projectArr1-=>",projectArr1)
      if(projectArr1 == null || projectArr1 == '' || projectArr1 == undefined){
        this.projectList1 = []
      }else{
        this.initialList1(projectArr1)
      }

    },
		mounted(){

    },
		methods:{
			one(){
        if(this.flag1 == '0'){
          return '新建'
        }else if(this.flag1 == '1'){
          return '编辑'
        }
				
			},
      edit1(e){//编辑
        console.log("edit1-=>",e)
        let item2 = null;
        this.curId = e;
        for(item1 of this.projectList1){
          console.log("item1-=>",item1)
          if(item1.id === e){
            item2 = item1
            break;
          }
        }
        console.log("item2-=>",JSON.stringify(item2))
        this.date1 = item2.date1
        this.projName = item2.name
        this.projRemark = item2.remark
        this.curId = item2.id
        this.flag1 = '1'

        $('#modal-addProject').modal('show')

      },
      delete1(e){//删除
        console.log("delete1-=>",e)
        $(document).Toasts('create', {
            title: '功能提示',
            autohide: true,
            delay: 1000,
            body: '暂时还没有实现........'
        })
      },
      getStatusText(e){

        if(e == '1'){
          return '使用中'
        }else if(e == '2'){
          return '已完成'
        }
      },
      initialList1(e){
        console.log("initialList1-=>",e)
        this.projectList1 = JSON.parse(e)
        console.log("this.projectList1-=>",this.projectList1)
        this.maxId = this.projectList1.length + 1
      },
			addProject(){
				this.date1 = formatDateToYYYYMMDDHHMMSS(new Date());
        this.projName = ''
        this.projRemark = ''
				$('#modal-addProject').modal('show')
			},
			handleSubmit1(e){

    		let form1 = e.target;
        let formData = new FormData(form1);
        console.log("formData-=>",formData)
        console.log("formData.projectName-=>",formData.get('projectName'))
        console.log("formData.projectDate-=>",formData.get('projectDate'))
        console.log("formData.projectRemark-=>",formData.get('projectRemark'))

        let pN1 = formData.get('projectName')
        let pR1 = formData.get('projectRemark')
        let pD1 = formData.get('projectDate')

        if(pN1 == null || pN1 == '' || pN1 == undefined){
        	//alert('项目名不可为空')
        	$(document).Toasts('create', {
		        title: '空值提示',
		        autohide: true,
		        delay: 1000,
		        body: '项目名不可为空........'
		      })
        	return
        }

        let obj1 = {}
        obj1.name = pN1
        obj1.remark = pR1
        obj1.date1 = pD1
        obj1.status = '1'
        if(this.flag1 == '1'){
          obj1.id = this.curId 
          this.saveEditToDb(obj1)
          this.flag1 = '0'
        }else{
          obj1.id = this.maxId
          this.saveToDb(obj1)
          this.maxId += 1         
        }

        $('#modal-addProject').modal('toggle')
			},
      saveEditToDb(e){
        console.log("saveEditToDb-=>",e)

        let ii1 = -1;
        for(item1 of this.projectList1){
          console.log("item1-=>",item1)
          ii1 += 1
          if(item1.id === e.id){
            break;
          }
        }
        this.projectList1[ii1] = e

        let strArr2 = JSON.stringify(this.projectList1)
        console.log("strArr2-=>",strArr2)
        localStorage.setItem('projList',strArr2);

      },
			saveToDb(e){
				console.log("saveToDb-=>",e)

        this.projectList1.push(e)
        console.log(".projectList1.length-=>",this.projectList1.length)

        let strArr1 = JSON.stringify(this.projectList1)
        console.log("strArr1-=>",strArr1)
        localStorage.setItem('projList',strArr1);
			}
		}
	})
</script>
</html>
